<template>
  <scroll-view class="whf oh" scroll-y>
    <view class="search y jc whf p1em">
      <view class="x jc">
        <!-- <mInput v-model="data" class="search-input" aceholder="请输入查询名称" type="text" confirm-type="search"
          @confirm="search" /> -->
        <input type="text" v-model="data" class="search-input" placeholder="请输入查询名称" confirm-type="search"
          @confirm="search" />
        <button @click="search" type="primary" size="mini" class="search-buttom">搜索</button>
      </view>
      <view class="recent wf mt1em xw">
        <view class="title x jc zb wf">
          <view class="mac-ico-time label">最近搜索</view>
          <view class="mac-ico-delete" @click="clear" />
        </view>
        <view class="item" v-for="(i, ii) in recent" :key="ii" @click="data = i">{{ i }}</view>
      </view>
    </view>
  </scroll-view>
</template>
<script lang="ts">
  import { defineComponent } from "vue";
  import mInput from "@/components/m-input.vue";
  export default defineComponent({
    name: "search",
    components: { mInput },
    // props: {modelValue:{type:Object,default(){return {};}}},
    // watch:{modelValue:{handler(n,o){this.init();},deep:true}},
    data() {
      return {
        data: "",
        recent: [] as string[],
      };
    },
    // computed:{},
    // onLoad(p) { },
    created() { this.init(); },
    // onPullDownRefresh() {uni.stopPullDownRefresh();},
    methods: {
      init() {
        this.recent = uni.getStorageSync("recent") || [];
      },
      search() {
        if (this.data) {
          const i = this.recent.findIndex(e => e == this.data);
          if (i >= 0) {
            this.recent.splice(i);
          }
          this.recent.unshift(this.data);
          uni.setStorageSync("recent", this.recent);
          uni.navigateTo({ url: "/pages2/list?name=" + this.data });
        } else {
          uni.navigateTo({ url: "/pages2/list" });
        }
      },
      clear() {
        uni.removeStorageSync("recent");
        this.recent = [];
      },
    },
    // mounted() { },
  });
</script>
<style lang="scss" scoped>
  .search {
    position: relative;
    width: 100%;
    .x{
      width: 100%;
    }
    &-input{
      width: calc(100% - 8em);
      border-radius: .3em;
      border: 1px solid #666;
      padding: 0 .5em;
      height: 2em;
      line-height: 2em;
    }
    &-buttom {
      padding: .2em 2em;
      margin: 0 0 0 2em;
    }
    .title {
      color: #666;
      .label::before {
        margin-right: 0.4em;
      }
    }
    .item {
      margin: 0.4em 0 0 1em;
      padding: .8em 0.4em;
      background-color: #eee;
      border-radius: 0.6em;
    }
  }
</style>